<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>

    <div id='app'>
        <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        axios.defaults.baseURL = 'http://localhost:3000/';
        axios.interceptors.response.use(
            function (response) {
                return response.data;
            },
            function (error) {
                return Promise.reject(error);
            }
        );
        // 之前 多次使用ajax请求数据, 写的是回调地狱的样式,后来通过使用promise处理,将回调地狱的问题解决了
        // async和await是来进一步简化异步操作的(本质就是为了简化.then)

        const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {

            },
            // 1. 函数前async关键字   async放在函数之前,将函数变成一个异步函数
            // 2. await关键字只能放在async函数中
            // 3. async 和 await 一般是同时出现的
            created: async function () {
                // await后面的是一个promise对象
                // Promise.then  可以拿到响应的
                // const {
                //     data: res
                // } = await axios.get('fruits')
                // console.log(res);

                const res = await axios.get("fruits");
                console.log(res);
            },
        })
    </script>
</body>

</html>